<template>
	<view class="paper-list d-flex animated flipInX fast" @tap="openChat">
		<image :src="item.userpic" mode="widthFix" lazy-load></image>
		<view class="right flex-1">
			<view class="name d-flex jc-between">
				{{item.username}}
				<view class="time">{{item.timer}}</view>
			</view>
			<view class="message d-flex jc-between">
				{{item.message}}
				<template v-if="item.unread > 0">
					<view class="unread">
						{{item.unread}}
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				required: true
			},
			index: {
				type: Number,
				required: true
			}
		},
		methods: {
			openChat() {
				this.$Router.push({
					name: 'chat'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.paper-list {
		border-bottom: 1upx solid #EEEEEE;
		padding: 20upx;

		image {
			width: 100upx;
			height: 100upx;
			border-radius: 13upx;
			margin-right: 20upx;
			flex-shrink: 0;
		}

		.right {
			.name {
				font-size: 35upx;
				color: #333333;

				.time {
					color: #CDCDCD;
				}
			}

			.message {
				color: #999999;

				.unread {
					margin-right: 18upx;
					width: auto;
					height: 32upx;
					line-height: 32upx;
					padding: 0 10upx;
					border-radius: 50%;
					font-size: 24upx;
					text-align: center;
					color: #FFFFFF;
					background-color: #FF5757;
				}
			}
		}
	}
</style>
